<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "City",
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let Cesium = this.cesium
      Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYzI1NzcwNS1jZDQ0LTQzZjMtOTIyZC0xMDgzNWNmODVhYmUiLCJpZCI6ODYxODQsImlhdCI6MTY0NzU2OTU5N30.oNBhNr4HdFDhGrxYbHX0qdxVpFLIhlVtXmsW6oSr9Y4"
      let viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain()
      })
      viewer.scene.primitives.add(Cesium.createOsmBuildings())

      viewer.scene.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(-74.019, 40.6912, 750),
        orientation: {
          heading: Cesium.Math.toRadians(20),
          pitch: Cesium.Math.toRadians(-20)
        }
      })

      viewer._cesiumWidget._creditContainer.style.display = "none" // 隐藏版权
    }
  }
}
</script>

<style lang='scss' scoped>
html, body, #cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
